import React from 'react';


import classnames from 'classnames';
//component


import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {};
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    render() {
        const {stateId, list} = this.props;
        const classNames = classnames({
            'orin-w-personaltaps-root': true,
            [this.props.className]: this.props.className ? true : false
        });

        return (
            <div className={classNames}>
                <ul className="personal-taps">
                    {
                        list.map((item, index) => {
                            if (!item.hide) {
                                return (
                                    <li key={item.id} className={stateId === item.id ? 'taps-item active' : 'taps-item'}
                                        onClick={(e) => this.props.onClick(e, item.id)}>
                                        <p className="text">{item.text}</p>
                                        {item.icon?<p className="count">({item.count})</p>:''}
                                    </li>
                                )
                            }
                        })
                    }
                </ul>
            </div>
        );
    }
}
